<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<!-- 头部 -->
		<c-nav-bar1 title="订单详情"></c-nav-bar1>
		<view class="bg"></view>
		<view class="box top">
			<view class="t_left"><text>{{ocfg[item.orderState]}}</text></view>
			<view class="t_right" @tap="toShowDetails(item.orderState)">
				<view>￥
					<block v-if="item.orderState=='6'||item.orderState=='7'">
						<text>{{ item.totalRefundFee }}</text>
					</block>
					<block v-else>
						<text>{{ item.orderRealityPay }}</text>
					</block>
				</view>
				<image src="@/static/my/icon_right.png" mode="" v-if="item.orderState!='6'&&item.orderState!='7'"></image>
			</view>
		</view>
		<view class="djs" v-if="item.orderState==0&&djsTime">
			<uCountDown text="余票变动频繁剩余支付时间：" color="#ffffff" :fontSize="24" @finish="finish" :djsTime="djsTime" />
		</view>
		<view class="ship passenger">
			<block v-if="item&&item.detailDTOList&&item.detailDTOList.length>0">
				<view class="sp_item" v-for="(person,index) in item.detailDTOList" :key="index">
					<canvas :canvas-id="'qrcode'+index" style=" margin:auto; width:180rpx;height: 180rpx;"></canvas>
					<view class="s_top">
						<view class="st_left">
							<text>{{person.date}}</text>
							<text class="stl_week">{{person.week}}</text>
							<view class="stl_right">
								<text>{{item.lineNum+''+item.sx}}</text>
								<text>{{item.clxm}}</text>
							</view>
						</view>
						<view class="st_right" v-if="item.timeMemosStr||item.timeMemos">
							<image src="@/static/my/icon_time.png"></image>
							<text>{{item.timeMemosStr||item.timeMemos}}</text>
						</view>
					</view>
					<view class="s_middle">
						<view class="sm_left">
							<text>{{person.time}}</text>
							<view class="fromto">
								<image src="@/static/index/steamerTicket/icon_line2.png"></image>
								<view class="fo_addr">
									<text>{{item.startPortName}}</text>
									<text>{{item.endPortName}}</text>
								</view>
							</view>
						</view>
						<view class="sm_img" @tap="toAddress">
							<image src="https://i.ringzle.com/file/20231025/6f507aa673cb412880fd6181c38d7e1b.png">
							</image>
							<text>港口地址</text>
						</view>
					</view>
					<view class="s_bottom" v-if="person.busStartTime">
						<view>
							<text>车船联票：开车时间：{{person.busStartTime}}</text>
							<text v-if="person.sailTime">开船时间：{{person.sailTime.substr(0,5)}}</text>
						</view>
					</view>

					<view class="p_middle">
						<view class="sbg">{{ocfg[person.itemState]}}</view>
						<view class="pm_content">
							<view class="pm_left">
								<view class="pml_name">
									<text>{{person.passName}}</text>
									<view class="pmln_type">{{personTypeCfg[person.priceType]||''}}</view>
								</view>
								<view class="pml_idcard">{{personCardCfg[person.credentialType]||'证件号'}}
									{{person.credentialNum}}
								</view>
								<view class="pml_ship">
									<text>{{person.seatClassName}}</text>
									<text v-if="!person.plateNum&&person.seatNumber">序号 {{person.seatNumber}}号</text>
									<text v-if="person.plateNum">序号 {{person.seatClass}} | 车牌号
										{{person.plateNum}}</text>
								</view>
								<view class="pml_price">￥{{person.realFee}}</view>
							</view>
							<view v-if="item.orderState==2||item.orderState==5" class="pm_right"
								@tap="showEwm(person.qrCodeBase64)">
								<image class="pmr_ewm" :src="person.qrCodeBase64"></image>
								<image class="pmr_fd" src="@/static/my/icon_fd.png"></image>
							</view>
						</view>
						<!-- <view class="p_bottom" @tap="xtShow = true" v-if="person.freeChildCount">
							<text>携童：{{person.freeChildCount}}</text>
							<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
						</view> -->
						<view class="p_gq" @tap="showTkDetails(person.isRefundId,person,item.orderState)"
							v-if="person.itemState==6||person.itemState==7">
							<text>退款详情</text>
							<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
						</view>
						<view class="p_gq" @tap="showGqDetails(person)" v-if="person.itemState==5">
							<text>改签前详情</text>
							<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
						</view>
					</view>
					<view class="p_middle" v-for="(mp,midx) in person.freeChilInfoList"
						v-if="person&&person.freeChilInfoList">
						<view class="sbg">{{ocfg[person.itemState]}}</view>
						<view class="pm_content">
							<view class="pm_left">
								<view class="pml_name">
									<text>{{mp.childName||''}}</text>
									<view class="pmln_type">免票儿童</view>
								</view>
								<view class="pml_idcard">{{personCardCfg[mp.type]}} {{mp.card}}</view>
								<view class="pml_ship">
									<text>{{person.seatClassName}}</text>
									<text v-if="!person.plateNum&&person.seatNumber">序号 {{person.seatNumber}}号</text>
									<text v-if="person.plateNum">序号 {{person.seatClass}} | 车牌号
										{{person.plateNum}}</text>
								</view>
								<view class="pml_price">￥0</view>
							</view>
							<!-- <view v-if="item.orderState==2||item.orderState==5" class="pm_right"
								@tap="showEwm('https://i.ringzle.com/file/20231025/76755127239b42a4868a911960b5842a.png')">
								<image class="pmr_ewm"
									src="https://i.ringzle.com/file/20231025/76755127239b42a4868a911960b5842a.png"></image>
								<image class="pmr_fd" src="@/static/my/icon_fd.png"></image>
							</view> -->
						</view>
					</view>
				</view>
			</block>
		</view>

		<view class="box order">
			<text class="o_title">订单信息</text>
			<view class="o_item">
				<text class="oi_left">订单编号</text>
				<view class="oi_right">
					<text>{{item.orderId}}</text>
					<view class="oir_copy" @tap="copyOrderNo">复制</view>
				</view>
			</view>
			<view class="o_item">
				<text class="oi_left">下单时间</text>
				<view class="oi_right">
					<text>{{item.createTime}}</text>
				</view>
			</view>
			<view class="o_item">
				<text class="oi_left">联系人</text>
				<view class="oi_right">
					<text>{{item.linkPerson}}</text>
				</view>
			</view>
			<view class="o_item">
				<text class="oi_left">联系方式</text>
				<view class="oi_right">
					<text>{{item.linkPhone}}</text>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view @tap="cancelOrder" v-if="item.orderState==0">取消订单</view>
			<view @tap="immediatePayment" v-if="item.orderState==0">立即支付</view>
			<view @tap="changeTicket" v-if="item.orderState==1||item.orderState==2||item.orderState==5">改签</view>
			<view @tap="refundTicket"
				v-if="(item.orderState==1||item.orderState==2||item.orderState==5)&&!isalltk">
				退票</view>
			<view @tap="deleteOrder" style="background-color: #F6F6F6; color: #111; width:50% ;"
				v-if="item.orderState==3||item.orderState==7||item.orderState==20">删除</view>
			<view @tap="againOrder" :style="{'width':(item.orderState==3||isalltk)?'50%':'calc(50% - 15rpx)'}"
				v-if="item.orderState>2&&item.orderState!=5">再次预订</view>

		</view>
		<!-- 费用明细 -->
		<u-popup :show="detailsShow" @close="detailsShow=false">
			<view class="details">
				<view class="title">
					<text>费用明细</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="detailsShow=false"></image>
				</view>
				<view>
					<view class="address">{{item.startPortName}}-{{item.endPortName}}</view>
					<view class="tickets" v-for="(mx,index) in mxList" :key="index" v-if="mxList.length>0&&mx.num>0">
						<text>{{mx.type}}</text>
						<view>￥{{mx.price}}<span>X{{mx.num}}</span></view>
					</view>
					<view class="tickets" v-if="item.discountCouponPrice">
						<text>优惠券抵扣</text>
						<view>￥-{{item.discountCouponPrice}}</span></view>
					</view>
					<view class="total">
						<text>合计</text>
						<view>￥{{item.orderRealityPay}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 协童信息 -->
		<u-popup :show="xtShow" @close="xtShow=false">
			<view class="xt_details">
				<view class="title">
					<text>携童信息</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="xtShow=false"></image>
				</view>
				<view class="xd_tip">携童{{xtList.length}}</view>
				<view class="xt_item" v-for="(item,index) in xtList" :key="index">
					<text class="name">{{item.name}}</text>
					<text class="idcard">身份证：{{item.idcard}}</text>
				</view>
			</view>
		</u-popup>
		<!-- 展示凭证二维码 -->
		<view class="ewmup">
			<u-popup :show="codeShow" mode="center" :round="16" @close="codeShow=false">
				<view class="ewm_details">
					<view class="ed_title">
						<text>凭证二维码</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="codeShow=false"></image>
					</view>
					<view class="ed_img">
						<image :src="codeImg" mode="widthFix"></image>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 改签详情 -->
		<view class="gqxq">
			<u-popup :show="gqShow" mode="center" :round="16" @close.stop="closeGq">
				<view class="gq_details">
					<view class="gqd_title">
						<text>改签前详情</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap.stop="closeGq"></image>
					</view>
					<view class="gqd_ship">
						<view class="s_top">
							<view class="st_left">
								<view class="stl_gq">改签</view>
								<text>{{item.date}}</text>
								<text>{{item.week}}</text>
							</view>
							<view class="st_right">
								<text>{{item.lineNum+''+item.sx}}</text>
								<text>{{item.clxm}}</text>
							</view>
						</view>
						<view class="s_middle">
							<view class="sm_left">
								<text>{{item.time}}</text>
								<view class="fromto">
									<image src="@/static/index/steamerTicket/icon_line2.png"></image>
									<view class="fo_addr">
										<text>{{item.startPortName}}</text>
										<text>{{item.endPortName}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="gqd_passenger">
						<view class="pm_left">
							<view class="pml_name">
								<text>{{passenger.passName}}</text>
								<view class="pmln_type">{{personTypeCfg[passenger.priceType]||''}}</view>
							</view>
							<view class="pml_idcard">{{personCardCfg[passenger.credentialType]||'证件号'}} {{passenger.credentialNum}}</view>
							<view class="pml_ship">
								<text>{{passenger.seatClassName}}</text>
								<text v-if="!passenger.plateNum">序号 {{passenger.seatNumber}}号</text>
								<text v-else>序号 {{passenger.seatClass}} | 车牌号 {{passenger.plateNum}}</text>
							</view>
							<view class="pml_price">￥{{passenger.realFee}}</view>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast"></u-toast>

		<!-- 删除弹框 -->
		<u-modal :show="showdelete" :title="title" :content='contented' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirmed" @cancel='cancel'></u-modal>
	</view>
</template>

<script>
	import UQrcode from '@/uqrcode.js'
	export default {
		name: 'shipTicketOrderDetails',
		data() {
			return {
				h: uni.getWindowInfo().windowHeight - 60,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#FFFFFF"
				},
				item: null,
				ocfg: this.$ocfg,
				week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				price: 340,
				isXt: false,
				detailsShow: false,
				mxList: [],
				xtShow: false,
				xtList: [{
					name: '周莫深',
					idcard: '3421120021009009'
				}],
				codeShow: false,
				codeImg: '',
				gqShow: false,
				passenger: null,
				isalltk: false,
				portCfg: {
					'1010': {
						lng: 122.425225,
						lat: 30.738996,
						title: '李柱山码头',
						address: '浙江省舟山市嵊泗县李五线嵊泗列岛风景名胜区',
						telphone: '(0580)5078323/(0580)5083723'
					},
					'1011': {
						lng: 122.425225,
						lat: 30.738996,
						title: '李柱山码头',
						address: '浙江省舟山市嵊泗县李五线嵊泗列岛风景名胜区',
						telphone: '(0580)5078323/(0580)5083723'
					},
					'1012': {
						lng: 122.465182,
						lat: 30.729425,
						title: '小菜园客运码头',
						address: '浙江省舟山市嵊泗县海滨东路265号',
						telphone: '(0580)5070342'
					},
					'1013': {
						lng: 122.699829,
						lat: 30.846601,
						title: '嵊泗(绿华)',
						address: '浙江省舟山市嵊泗县花鸟岛内(东侧)',
						telphone: '(0580)5596999'
					},
					'1014': {
						lng: 122.699829,
						lat: 30.846601,
						title: '花鸟客运码头',
						address: '浙江省舟山市嵊泗县花鸟岛内(东侧)',
						telphone: '(0580)5596999'
					},
					'1015': {
						lng: 122.699829,
						lat: 30.846601,
						title: '嵊泗(毕下)',
						address: '浙江省舟山市嵊泗县花鸟岛内(东侧)',
						telphone: '(0580)5596999'
					},
					'1016': {
						lng: 122.80995,
						lat: 30.724053,
						title: '嵊山北码头',
						address: '浙江省舟山市嵊泗县嵊山枸杞景区内(东侧)',
						telphone: ''
					},
					'1017': {
						lng: 122.757875,
						lat: 30.708894,
						title: '枸杞岛干斜码头',
						address: '浙江省舟山市嵊泗县轧轧洞',
						telphone: ''
					},
					'1018': {
						lng: 122.092689,
						lat: 30.591915,
						title: '大洋站码头',
						address: '浙江省舟山市嵊泗县大洋镇后门村',
						telphone: ''
					},
					'1019': {
						lng: 122.52484,
						lat: 30.70048,
						title: '五龙',
						address: '浙江省舟山市嵊泗县沿边路73号附近',
						telphone: ''
					},
					'1020': {
						lng: 122.229553,
						lat: 30.241081,
						title: '岱山竹屿码头',
						address: '浙江省舟山市岱山县526国道与采霞路交叉口东140米',
						telphone: ''
					},
					'1022': {
						lng: 122.118523,
						lat: 30.138428,
						title: '舟山三江码头',
						address: '浙江省舟山市定海区马岙镇定马线',
						telphone: '(0580)8081001'
					},
					'1027': {
						lng: 122.371892,
						lat: 29.951295,
						title: '朱家尖蜈蚣峙码头',
						address: '浙江省舟山市普陀区朱家尖镇普渡路4号',
						telphone: '(0580)3889090'
					},
					'1028': {
						lng: 122.134244,
						lat: 30.600722,
						title: '沈家湾客运码头',
						address: '浙江省舟山市嵊泗县洋山深水港东端',
						telphone: '(0580)5298323'
					},
					'1030': {
						lng: 122.285296,
						lat: 30.433887,
						title: '衢山客运中心',
						address: '浙江省舟山市岱山县蓬莱路91号',
						telphone: '(0580)4372611'
					},
					'1031': {
						lng: 122.177286,
						lat: 30.342718,
						title: '燕窝山客运中心',
						address: '浙江省舟山市岱山县燕窝山码头',
						telphone: ''
					},
					'1034': {
						lng: 122.55166,
						lat: 30.665056,
						title: '黄龙码头',
						address: '浙江省舟山市嵊泗县',
						telphone: ''
					},
					'1036': {
						lng: 121.317611,
						lat: 31.194301,
						title: '上海长途客运虹桥站',
						address: '上海市闵行区申虹路298号',
						telphone: '(021)51245555'
					},
					'1041': {
						lng: 121.53371,
						lat: 29.861731,
						title: '宁波汽车南站',
						address: '浙江省宁波市海曙区甬水桥路408号',
						telphone: '(0574)87133561'
					},
					'1046': {
						lng: 121.501345,
						lat: 31.208135,
						title: '上海南浦旅游集散中心',
						address: '上海市黄浦区外马路1588号',
						telphone: '4008872626'
					},
					'1053': {
						lng: 122.216957,
						lat: 30.255614,
						title: '岱山县长途客运中心',
						address: '浙江省舟山市岱山县衢山大道999号',
						telphone: '(0580)4472521'
					},
					'1054': {
						lng: 122.099067,
						lat: 30.297928,
						title: '岱山旅游集散中心',
						address: '岱山520路,岱山502路,岱山501路',
						telphone: ''
					}
				},
				djsTime: 0,
				showdelete: false,
				title: '温馨提示',
				contented: '您确定要删除吗？确定删除将不可撤回！',
				delId: null,
				orderId:''
			}
		},
		onLoad(option) {
			if (option.orderId) {
				this.orderId = option.orderId;
				this.getDetails(option.orderId);
			}
		},
		methods: {
			toShowDetails(state){
				if(state=='6'||state=='7') return
				this.detailsShow = true;
			},
			// 取消
			cancel() {
				this.showdelete = false
			},
			deleteOrder(item) {
				this.showdelete = true
				this.delId = this.item.id
			},

			// 确定删除
			confirmed() {
				let ids = []
				ids.push(this.delId)
				this.$api.del('/api/travel/api/ship/order/deleteOrder/',
					ids
				).then((res) => {
					if (res.data.code == 0) {
						this.$showToast('删除成功');
						this.showdelete = false
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMy/order/index?name=船票&type=0&typeIndex=0'
							})
						}, 300)
					} else {
						this.$showModal(res.data.msg);
						this.showdelete = false
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMy/order/index?name=船票&type=0&typeIndex=0'
							})
						}, 300)
					}
				})
			},
			getDetails(orderId) {
				this.$api.get('/travel/isshiporder/getOrderAndDetail/' + orderId).then(res => {
					if (res.data.code === 0) {
						this.item = res.data.data;
						this.item.totalRefundFee = 0;
						if(this.item.orderState==0){
							let diffMS = Date.parse(new Date(this.item.expireTime)) - Date.parse(new Date());
							if(diffMS>0) this.djsTime = diffMS;
						}
						this.item.date = new Date(this.item.sailDate).Format('MM月dd日');
						this.item.week = this.week[new Date(this.item.sailDate).getDay()];
						this.item.time = new Date(new Date().Format('yyyy-MM-dd') + ' ' + this.item.sailTime)
							.Format('hh:mm');
						if (this.item.detailDTOList && this.item.detailDTOList.length == 1 && this.item
							.detailDTOList[0].freeChildCount !== 0) this.isXt = true;

						if (this.item.detailDTOList.length === 0) return
						this.item.detailDTOList.forEach((d, i) => {
							if(d.itemState=='6'||d.itemState=='7'){
								this.item.totalRefundFee+=(parseFloat(d.realRefundFee||d.refundFee)||0);
								if(d.isQuitCharge==1) this.item.totalRefundFee+=(d.realRefundCharge||d.refundCharge);
							}
							
							d.date = new Date(d.sailDate).Format('MM月dd日');
							d.week = this.week[new Date(d.sailDate).getDay()];
							d.time = new Date(new Date().Format('yyyy-MM-dd') + ' ' + d.sailTime).Format(
								'hh:mm');
							this.qrFun((this.item.buyTicketType==1?'0':(this.item.buyTicketType==2?'2':''))+d.obtainTicketNum, i);
						})
						let cnum = this.item.detailDTOList.filter(d => d.priceType == 1 && !d.plateNum).length;
						let ernum = this.item.detailDTOList.filter(d => d.priceType == 2).length;
						let carnum = this.item.detailDTOList.filter(d => d.priceType == 1 && d.plateNum).length;
						let cprice = this.item.detailDTOList.find(d => d.priceType == 1 && !d.plateNum);
						let etprice = this.item.detailDTOList.find(d => d.priceType == 2);
						let carprice = this.item.detailDTOList.find(d => d.priceType == 1 && d.plateNum);
						this.mxList = [{
								type: '车票',
								price: carprice ? carprice.realFee : '',
								num: carnum
							},
							{
								type: '成人票',
								price: cprice ? cprice.realFee : '',
								num: cnum
							},
							{
								type: '儿童票',
								price: etprice ? etprice.realFee : '',
								num: ernum
							},
						];

						let tknum = this.item.detailDTOList.filter(d => d.itemState == 6 || d.itemState == 7)
							.length;
						if (tknum == this.item.detailDTOList.length) this.isalltk = true;
						else this.isalltk = false;
					} else this.$showModal(res.data.msg)
				})
			},
			qrFun(text, index) {
				UQrcode.make({
					canvasId: 'qrcode' + index, //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样
					componentInstance: this,
					text: text,
					size: 90,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: UQrcode.errorCorrectLevel.H,
					success: res => { 
						this.$set(this.item.detailDTOList[index],'qrCodeBase64',res);
					}
				})
			},
			closeGq() {
				this.gqShow = false;
			},
			copyOrderNo() {
				let that = this;
				// #ifdef H5
				this.$copyText(this.item.orderId).then(res => {
					this.$showToast('复制成功');
				})
				// #endif
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: this.item.orderId,
					success(res) {
						that.$showToast('复制成功');
					},
					fail(err) {
						that.$showToast('复制失败');
					}
				})
				// #endif
			},
			showEwm(src) {
				this.codeShow = true;
				this.codeImg = src;
			},
			//改签
			changeTicket() {
				let newItem = JSON.parse(JSON.stringify(this.item));
				newItem.detailDTOList.forEach(d => {
					if (d.qrCodeBase64) delete d.qrCodeBase64
				});
				uni.navigateTo({
					url: '/pagesMy/shipTicketOrder/changeTicket?item=' + JSON.stringify(newItem)
				})
			},
			//退票退款
			refundTicket() {
				let newItem = JSON.parse(JSON.stringify(this.item));
				newItem.detailDTOList.forEach(d => {
					if (d.qrCodeBase64) delete d.qrCodeBase64
				});
				uni.navigateTo({
					url: '/pagesMy/shipTicketOrder/refundTicket?item=' + JSON.stringify(newItem)
				})
			},
			//退款详情
			refundDetails() {
				let newItem = JSON.parse(JSON.stringify(this.item));
				newItem.detailDTOList.forEach(d => {
					if (d.qrCodeBase64) delete d.qrCodeBase64
				});
				uni.navigateTo({
					url: '/pagesMy/shipTicketOrder/refundDetails?item=' + JSON.stringify(newItem)
				})
			},
			// 退款详情
			showTkDetails(id, person, orderState) {
				uni.navigateTo({
					url: '/pagesMy/shipTicketOrder/refundDetails?id=' + id + "&person=" + encodeURIComponent(JSON
						.stringify(person)) + "&orderState=" + orderState
				})
			},
			//再次预订
			againOrder() {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/index'
				})
			},
			cancelOrder() {
				this.$api.post('/travel/api/ship/order/cancel', {
					orderId: this.item.orderId
				}).then(res => {
					if (res.data.code === 0) {
						this.$showToast('订单已取消');
						uni.reLaunch({
							url: '/pagesMy/order/index'
						})
					} else this.$showModal(res.data.msg)
				})
			},
			immediatePayment() {
				this.$api.get('/travel/isshiporder/getOrderAndDetail/' + this.orderId).then(resu => {
					if (resu.data.code === 0) {
						if(resu.data.data.orderState==0){
							this.$api.post('/order/icbc/createOrder', {
								orderCode: this.item.orderId,
								tradeType: 'JSAPI',
								openId: JSON.parse(uni.getStorageSync('userInfo')).openId
							}, false).then(res => {
								if (res.statusCode == 200 && res.data != null) {
									this.payShow = false;
									this.$wxPay(res.data).then(result => {
										this.$showToast('支付成功');
										setTimeout(() => {
											uni.reLaunch({
												url: '/pagesMy/order/index'
											})
										}, 1500);
									})
								}
							})
						}else this.$showToast('不可支付，请返回列表刷新');
					}else this.$showToast(resu.data.msg);
				})
			},
			//跳转港口地址
			toAddress() {
				let departPort = this.portCfg['10' + this.item.startPortNo] || '';
				let arrivePort = this.portCfg['10' + this.item.endPortNo] || '';
				if (!departPort && !arrivePort) return this.$showToast('暂无港口地址');
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/portAddress?departPort=' + JSON.stringify(departPort) +
						"&arrivePort=" + JSON.stringify(arrivePort)
				})
			},
			showGqDetails(person) {
				this.gqShow = true;
				this.passenger = person;
			},
			finish() {
				this.$api.post('/travel/api/ship/order/cancel', {
					orderId: this.item.orderId
				}).then(res => {
					setTimeout(() => {
						this.djsTime = 0;
						this.getDetails(this.item.orderId);
					}, 500)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-bottom: 140rpx;

		.bg {
			// width: 100%;
			// height: 702rpx;
			// position: absolute;
			// top: 0;
			// left: 0;
			// z-index: 0;
			height: 700rpx;
			position: fixed;
			// top: 44px;
			z-index: 0;
			width: 100%;
			background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA);
		}

		.box {
			width: calc(100% - 88rpx);
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 30rpx 20rpx;
			position: relative;
		}

		.djs {
			width: calc(100% - 88rpx);
			padding: 0 20rpx;
			margin-bottom: 35rpx;
			position: relative;
		}

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: transparent;
			padding-top: 48rpx;

			.t_left {
				text {
					font-size: 44rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}
			}

			.t_right {
				display: flex;
				align-items: center;

				view {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

					text {
						font-size: 44rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						margin-left: 4rpx;
					}
				}

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}
		}

		.ship {
			width: calc(100% - 48rpx);
			margin-top: 10rpx !important;

			.sp_item {
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				position: relative;
				margin-top: 20rpx;
				overflow: hidden;

				&:first-child {
					margin-top: 0;
				}

				canvas {
					position: absolute;
					left: -400rpx;
				}
			}

			.s_top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.st_left {
					display: flex;
					align-items: center;

					&>text {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;

						&.stl_week {
							margin-left: 16rpx;
						}
					}

					.stl_right {
						display: flex;
						align-items: center;
						margin-left: 20rpx;

						&>text {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #777777;

							&:last-child {
								margin-left: 17rpx;
							}
						}
					}
				}

				.st_right {
					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-left: 16rpx;
					}
				}
			}

			.s_middle {
				margin-top: 28rpx;
				display: flex;
				justify-content: space-between;

				.sm_left {
					display: flex;

					&>text {
						font-size: 40rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
					}

					.fromto {
						display: flex;
						align-items: center;
						margin-left: 40rpx;

						&>image {
							width: 8rpx;
							height: 68rpx;
						}

						.fo_addr {
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;

							text {
								font-size: 30rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;

								&:last-child {
									margin-top: 30rpx;
								}
							}
						}
					}
				}

				.sm_img {
					width: 178rpx;
					height: 128rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #5778A8;
						position: absolute;
						right: 24rpx;
						bottom: 31rpx;
					}
				}
			}

			.s_bottom {
				border-top: 1rpx solid #EFEFEF;
				padding-top: 30rpx;

				&>view {
					display: flex;
					align-items: center;
					margin-top: 16rpx;

					&:first-child {
						margin-top: 0;
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
						margin-left: 16rpx;

						&:first-child {
							margin-left: 0;
						}
					}
				}
			}
		}

		.passenger {
			margin-top: 20rpx;

			.p_top {
				display: flex;
				align-items: center;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #111111;

					&:last-child {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF7D01;
						margin-left: 20rpx;
					}
				}
			}

			.p_middle {
				position: relative;
				box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.06);
				padding: 36rpx 12rpx 26rpx 20rpx;
				margin-top: 32rpx;

				.sbg {
					position: absolute;
					right: 0;
					top: 0;
					height: 40rpx;
					background: #FFEEDD;
					line-height: 40rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF7D01;
					padding: 0 10rpx;
				}

				.pm_content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.pm_left {
						.pml_name {
							display: flex;
							align-items: center;

							&>text {
								font-size: 30rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;
							}

							.pmln_type {
								width: auto;
								height: 36rpx;
								background: #F5F8FA;
								border-radius: 8rpx;
								line-height: 36rpx;
								text-align: center;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #94A9C8;
								margin-left: 15rpx;
								padding: 0 10rpx;
							}
						}

						.pml_idcard {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-top: 24rpx;
						}

						.pml_ship {
							display: flex;
							align-items: center;
							margin-top: 32rpx;

							text {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								margin-left: 16rpx;

								&:first-child {
									margin-left: 0;
								}
							}
						}

						.pml_price {
							margin-top: 20rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}

					.pm_right {
						width: 180rpx;
						height: 180rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							position: absolute;
						}

						.pmr_ewm {
							width: 100%;
							height: 100%;
							z-index: 1;
						}

						.pmr_fd {
							width: 46rpx;
							height: 46rpx;
							z-index: 2;
						}
					}
				}
			}

			.p_bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 26rpx;

				text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.p_gq {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 24rpx;
				margin-top: 24rpx;
				border-top: 1rpx solid rgba(112, 112, 112, .1);

				text {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FF7D01;
				}

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.order {
			margin-top: 20rpx;

			.o_title {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			.o_item {
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.oi_left {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.oi_right {
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.oir_copy {
						width: 78rpx;
						height: 36rpx;
						border-radius: 18rpx;
						border: 1rpx solid #007A69;
						line-height: 36rpx;
						text-align: center;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #007A69;
						margin-left: 37rpx;
					}
				}
			}
		}

		.bottom {
			width: calc(100% - 80rpx);
			position: fixed;
			bottom: 0;
			padding: 21rpx 40rpx;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 9;
			gap: 0 20rpx;

			&>view {
				width: calc(50% - 15rpx);
				height: 80rpx;
				border-radius: 46rpx;
				// border: 1rpx solid #007A69;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				// font-weight: 400;
				font-weight: Bold;
				color: #FFFFFF;
				background-color: #007A69;
			}
		}

		.details {
			padding: 40rpx 30rpx 200rpx;

			.title {
				position: relative;
				text-align: center;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.address {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
				margin-top: 48rpx;
			}

			.tickets {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 42rpx;

				&>text {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}

				&>view {
					font-size: 28rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;

					span {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
					}
				}
			}

			.total {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 61rpx;

				text {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				view {
					height: 36rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.d_middle {
				padding: 40rpx 0 150rpx;

				&>view {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 40rpx 0;

					&:first-child {
						border-bottom: 1rpx solid #EFEFEF;
					}

					&>text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					&>view {
						font-size: 30rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						display: flex;
						align-items: center;

						span {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #777777;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.xt_details {
			padding: 40rpx 30rpx 200rpx;

			.title {
				position: relative;
				text-align: center;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 10rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.xd_tip {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				padding-top: 58rpx;
			}

			.xt_item {
				display: flex;
				flex-direction: column;
				margin-top: 24rpx;

				.name {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				.idcard {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
					margin-top: 20rpx;
				}
			}
		}

		.ewm_details {
			.ed_title {
				width: 100%;
				height: 110rpx;
				background: #F5F8FA;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 36rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.ed_img {
				padding: 40rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 80%;
				}
			}
		}

		.gq_details {
			.gqd_title {
				width: 100%;
				height: 110rpx;
				background: #F5F8FA;
				border-radius: 16rpx 16rpx 0rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				text {
					font-size: 36rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 36rpx;
					top: 50%;
					margin-top: -18rpx;
				}
			}

			.gqd_ship {
				width: 100%;
				padding: 64rpx 36rpx 30rpx;
				box-sizing: border-box;

				.s_top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.st_left {
						display: flex;
						align-items: center;

						.stl_gq {
							width: 64rpx;
							height: 36rpx;
							background: #007A69;
							border-radius: 12rpx;
							line-height: 36rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							letter-spacing: 2rpx;
							margin-right: 10rpx;
						}

						text {
							font-size: 30rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #111111;

							&:last-child {
								margin-left: 16rpx;
							}
						}
					}

					.st_right {
						display: flex;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 16rpx;
						}
					}
				}

				.s_middle {
					margin-top: 28rpx;
					display: flex;
					justify-content: space-between;

					.sm_left {
						display: flex;

						&>text {
							font-size: 40rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
						}

						.fromto {
							display: flex;
							align-items: center;
							margin-left: 40rpx;

							&>image {
								width: 8rpx;
								height: 68rpx;
							}

							.fo_addr {
								margin-left: 20rpx;
								display: flex;
								flex-direction: column;

								text {
									font-size: 30rpx;
									font-family: PingFang-SC-Bold, PingFang-SC;
									font-weight: bold;
									color: #333333;

									&:last-child {
										margin-top: 30rpx;
									}
								}
							}
						}
					}

					.sm_img {
						width: 178rpx;
						height: 128rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
						}

						text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #5778A8;
							position: absolute;
							right: 24rpx;
							bottom: 31rpx;
						}
					}
				}
			}

			.gqd_passenger {
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				width: 100%;
				padding: 30rpx 36rpx 48rpx;
				box-sizing: border-box;

				.pm_left {
					.pml_name {
						display: flex;
						align-items: center;

						&>text {
							font-size: 30rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
						}

						.pmln_type {
							width: auto;
							height: 36rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							line-height: 36rpx;
							text-align: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #94A9C8;
							margin-left: 15rpx;
							padding: 0 10rpx;
						}
					}

					.pml_idcard {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-top: 24rpx;
					}

					.pml_ship {
						display: flex;
						align-items: center;
						margin-top: 24rpx;

						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-left: 16rpx;

							&:first-child {
								margin-left: 0;
							}
						}
					}

					.pml_price {
						margin-top: 24rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}

		.gqxq,
		.ewmup {
			/deep/.u-popup__content {
				width: calc(100% - 48rpx);
			}
		}
	}
</style>